<template>
  <div>
    <div>多边形轮廓Shape(圆弧)</div>
    <div ref="webgl" id="webgl"></div>
  </div>
</template>
<script lang="ts" setup>
  import * as THREE from 'three';
  import { OrbitControls } from 'three/addons';
  import { onMounted, ref } from 'vue';

  const webgl: any = ref(null);
  let scene: any = null;
  let camera: any = null;
  let render: any = null;
  onMounted(() => {
    init();
  });
  function init() {
    scene = new THREE.Scene();
    const width = 500;
    const height = 300;
    camera = new THREE.PerspectiveCamera(30, width / height, 1, 10000);
    camera.position.set(-100, 300, 300);
    camera.lookAt(scene.position);
    render = new THREE.WebGLRenderer();
    render.setSize(width, height);
    webgl.value.appendChild(render.domElement);
    new OrbitControls(camera, render.domElement);
    const amLight = new THREE.AmbientLight(0xffffff);
    scene.add(amLight);
    const helper = new THREE.AxesHelper(200);
    scene.add(helper);

    const pointLight = new THREE.PointLight(0xffffff);

    pointLight.position.set(100, 100, 100);
    scene.add(pointLight);
    const pointLightHelper = new THREE.PointLightHelper(pointLight);
    scene.add(pointLightHelper);
    const material = new THREE.MeshLambertMaterial({
      color: 0x11ffff,
      transparent: true, //开启透明
      opacity: 0.7, //设置透明度
      // side: THREE.DoubleSide,
    });

    // 下面代码绘制了一个矩形+扇形的轮廓，圆心在(100, 0),半径50。
    const shape = new THREE.Shape();
    shape.moveTo(20, 0);
    shape.lineTo(150, 0); //.currentPoint变为(100+50,0)
    // 圆弧.arc参数的圆心0,0坐标是相对当前.currentPoint而言，而不是坐标原点
    // shape.arc(-50, 0, 50, 0, Math.PI / 2); //.currentPoint变为圆弧线结束点坐标
    shape.absarc(100, 0, 70, 0, Math.PI / 2); //.currentPoint变为圆弧线结束点坐标
    console.log('currentPoint', shape.currentPoint);
    // 绘制直线，直线起点：圆弧绘制结束的点  直线结束点：(0, 0)
    shape.lineTo(0, 70);
    const geomtry = new THREE.ShapeGeometry(shape);

    const materialMesh = new THREE.Mesh(geomtry, material);
    scene.add(materialMesh);
    // console.log('currentPoint', shape.currentPoint);

    renderFun();
  }
  function renderFun() {
    render.render(scene, camera);
    requestAnimationFrame(renderFun);
  }
</script>
<style lang=""></style>
